@CHARSET "ISO-8859-1";

@font-face {
	font-family: "My_Custom_Font";
	src: url('../fonts/fanjofey.tff');
}

html {
background: ##00aa77;
background-image: url("../img/Zen1.png"), url("../img/Zen2.png");
background-repeat: repeat-x, repeat;
}
#erreur {
	color: red;
	   margin-top : 10px;
	 text-shadow : none;
}
h3{
	color: orange;
	text-shadow:none;
}


.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eac380), color-stop(1, #fae4bd) );
	background:-moz-linear-gradient( center top, #eac380 5%, #fae4bd 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eac380', endColorstr='#fae4bd');
	background-color:#eac380;
}.button:active {
	position:relative;
	top:1px;
}
.button{
-moz-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
	box-shadow:inset 0px 1px 0px 0px #fcf8f2;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
	background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380');
	background-color:orange;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:150px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
	margin-left:5px;
	margin-top : 8px;
	
}

.textbox{
	
	 background: white; 
    border: 1px solid #ffa853; 
    border-radius: 5px; 
    box-shadow: 0 0 5px 3px #ffa853; 
    color: #666; 
    outline: none; 
    height:23px; 
    width: 275px; 
    margin : 3px;
    margin-top: 8px;
}


.connection label{
	font-weight:bold;
}

label{
	color: black;
	text-shadow : none;
}

.connection  {
	
	text-align:left;
	 margin-left: auto;
   margin-right: auto;
   width: 350px;

   /* NOTE: Only works for non-floated block elements */
   display: block;
   float: none;
   border:solid;
   padding : 10px;
   margin-top:5%;
   background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: 26px 26px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    26px 26px 5px rgba(50, 50, 50, 0.75);
box-shadow:         26px 26px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-color : grey;
text-shadow : none;
	
}
#footer{
	font-weight:bold;
	padding-top : 160px;	
	text-align : center;
	text-shadow : none;
}
body {
	text-shadow:3px 3px 1px rgba(223,255,13,0.6);
	font-weight:bold;
	color:#332302;
	letter-spacing:0pt;
	word-spacing:2pt;font-size:18px;text-align:center;font-family:helvetica, sans-serif;line-height:1;
}
th{
	broder:solid;
	
}
h1{
text-align : center;
text-shadow:4px 5px 3px rgba(179,179,179,1);font-weight:bold;font-style:oblique;color:#30290A;letter-spacing:1pt;word-spacing:2pt;font-size:34px;font-family:trebuchet MS, sans-serif;line-height:1;
}
.connection button{
	 display: block;
   float: none;
   margin-top : 3px;
   margin-left : auto;
   margin-right : auto;

}
#imgBanner {
	padding-left: 0px;
}

a {
	color: orange;
}

a.visited {
	color: orange;
}

#image{
position : relative;
border-radius: 63px 63px 63px 63px;
-moz-border-radius: 63px 63px 63px 63px;
-webkit-border-radius: 63px 63px 63px 63px;
border: 39px solid #a87f39;
height : 513px;
width : 750px;
margin: auto;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
bacground-color:none;

}


.affichage {
display: table;
font-weight:normal;
color:orange;
letter-spacing:1pt;
word-spacing:2pt;
font-size:76px;
text-align:center;
font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;

}
.affichage p{
	
	 display: table-cell; vertical-align: middle; text-align: center;
}

#base {
position : relative;
margin-left :auto;

}
#base  span{
	border-radius: 176px 176px 176px 176px;
-moz-border-radius: 176px 176px 176px 176px;
-webkit-border-radius: 176px 176px 176px 176px;
border: 26px solid #a87f39;
float: left;
margin-top:5px;
margin-left:15px;
width : 143px;
height : 136px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

}
#case1{
position : absolute;
top: 34px;
left: 70px;
width : 50px;
height : 50px;
}

#case2{
position : absolute;
top: 34px;
left: 162px;
width : 50px;
height : 50px;

}#case3{
position : absolute;
top: 34px;
left: 247px;
width : 50px;
height : 50px;

}#case4{
position : absolute;
top: 38px;
left: 326px;
width : 50px;
height : 50px;

}#case5{
position : absolute;
top: 49px;
left: 412px;
width : 50px;
height : 50px;

}#case6{
position : absolute;
top: 70px;
left: 490px;
width : 50px;
height : 50px;

}#case7{
position : absolute;
top: 80px;
left: 577px;
width : 50px;
height : 50px;

}#case8{
position : absolute;
top: 125px;
left: 646px;
width : 50px;
height : 50px;

}#case15{
position : absolute;
top: 106px;
left: 108px;
width : 50px;
height : 50px;

}#case14{
position : absolute;
top: 115px;
left: 189px;
width : 50px;
height : 50px;

}#case13{
position : absolute;
top: 128px;
left: 270px;
width : 50px;
height : 50px;

}#case12{
position : absolute;
top: 143px;
left: 345px;
width : 50px;
height : 50px;

}#case11{
position : absolute;
top: 155px;
left: 430px;
width : 50px;
height : 50px;

}#case10{
position : absolute;
top: 166px;
left: 515px;
width : 50px;
height : 50px;

}
#case9{
position : absolute;
top: 183px;
left: 600px;
width : 50px;
height : 50px;

}
#case16{
position : absolute;
top: 152px;
left: 26px;
width : 50px;
height : 50px;

}
#case17{
position : absolute;
top: 194px;
left: 91px;
width : 50px;
height : 50px;

}
#case18{
position : absolute;
top: 199px;
left: 170px;
width : 50px;
height : 50px;
}
#case19{
position : absolute;
top: 216px;
left: 247px;
width : 50px;
height : 50px;

}
#case20{
position : absolute;
top: 231px;
left: 323px;
width : 50px;
height : 50px;

}
#case21{
position : absolute;
top: 244px;
left: 402px;
width : 50px;
height : 50px;

}
#case22{
position : absolute;
top: 233px;
left: 480px;
width : 50px;
height : 50px;

}
#case23{
position : absolute;
top: 260px;
left: 550px;
width : 50px;
height : 50px;

}
#case24{
position : absolute;
top: 270px;
left: 619px;
width : 50px;
height : 50px;

}
#case25{
position : absolute;
top: 324px;
left: 670px;
width : 50px;
height : 50px;

}
#case32{
position : absolute;
top: 277px;
left: 122px;
width : 50px;
height : 50px;

}
#case31{
position : absolute;
top: 296px;
left: 199px;
width : 50px;
height : 50px;

}
#case30{
position : absolute;
top: 315px;
left: 285px;
width : 50px;
height : 50px;

}
#case29{
position : absolute;
top: 330px;
left: 368px;
width : 50px;
height : 50px;

}
#case28{
position : absolute;
top: 313px;
left: 448px;
width : 50px;
height : 50px;

}

#case27{
position : absolute;
top: 351px;
left: 521px;
width : 50px;
height : 50px;

}

#case26{
position : absolute;
top: 369px;
left: 606px;
width : 50px;
height : 50px;

}

#case33{
position : absolute;
top: 351px;
left: 114px;
width : 50px;
height : 50px;

}
#case34{
position : absolute;
top: 400px;
left: 177px;
width : 50px;
height : 50px;

}

#case35{
position : absolute;
top: 432px;
left: 246px;
width : 50px;
height : 50px;

}

#case36{
position : absolute;
top: 445px;
left: 328px;
width : 50px;
height : 50px;

}
#draggable{

}


